<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			kbd {
				border: 2px solid #cdcdcd;
				border-radius: 5px;
				box-shadow: #cdcdcd;
				box-shadow: inset 0 -1px 0 0 #cdcdcd;
				font-size: 12px;
				padding: 5px;
				font-weight: bold;
				color: #333;
				background-color: #fefefe;
			}
			#key-box{
				line-height: 2;
			}
		</style>
	</head>
	<body>
		<div id="key-box">
		</div>
	</body>
	<script>
		window.onkeyup = (e) => {
			e.preventDefault();
		}
		const keyBox = document.getElementById("key-box");
		window.onkeydown = (e) => {
			e.preventDefault();
			keyBox.innerHTML = `${keyBox.innerHTML}<kbd>${e.key}</kbd> / <kbd>${e.code}</kbd> + `;
		}
	</script>
</html>